<template>
  <view class="container">

    <!-- 左上角X号按钮 -->
    <view class="close-btn" @click="handleClose">
      <text class="x-icon">×</text>
    </view>
    <!-- 页面内容 -->
    <view class="page-content">
      <view class="title">手机号登录</view>
      <view class="form-box">
        <view class="form-row">
          <view class="label">国家/地区</view>
          <view class="country">中国大陆 <text class="country-code">(+86)</text></view>
        </view>
        <view class="form-row">
          <view class="label">手机号</view>
          <input class="input" type="number" placeholder="请填写手机号码" placeholder-class="input-placeholder"
            v-model="phone" />
        </view>
      </view>
      <view class="other-login">
        <text class="other-login-link">用微信号/QQ号/邮箱登录</text>
      </view>

    </view>
    <view class="content-bottom">


      <view class="phone-tip">上述手机号仅用于登录验证</view>
      <button class="submit-btn" @click="handleLogin">同意并继续</button>
      <view class="bottom-links">
        <text class="bottom-link">找回密码</text>
        <text class="divider">｜</text>
        <text class="bottom-link">冻结账号</text>
        <text class="divider">｜</text>
        <text class="bottom-link" @click="registerRoute">注册</text>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  data() {
    return {
      phone: ''
    };
  },
  mounted() {
    // 优先用路由参数，其次用本地缓存
    const query = (this.$mp && this.$mp.query) || {};
    this.phone = query.phone || uni.getStorageSync('regPhone') || '';
  },
  methods: {
    // X号按钮点击事件
    handleClose() {
      // 这里可以根据需求实现关闭逻辑
      // 例如返回上一页
      uni.navigateBack({
        delta: 1
      });
    },

    registerRoute() {
      uni.navigateTo({
        url: '/pages/register/register' // 替换为你的注册页面路径
      });

    },
    handleLogin() {
      if (!this.phone) {
        uni.showToast({ title: '手机号不能为空', icon: 'none' });
        return;
      }
      const phoneReg = /^1\d{10}$/;
      if (!phoneReg.test(this.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
        return;
      }
      // 跳转到 loginCom 页面并传递手机号
      uni.navigateTo({
        url: '/pages/loginCom/loginCom?phone=' + this.phone
      });
    }
  },
};
</script>

<style scoped>
.container {
  /* 确保内容不会被导航栏遮挡 */
  padding: 44px 20px 0 20px;
  background: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}



/* X号按钮样式 */
.close-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-icon {
  font-size: 24px;
  color: #333333;
  line-height: 1;
}

.page-content {
  padding: 16px;
}

.title {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  margin: 24px 0 32px 0;
  color: #222;
}

.form-box {
  background: #fff;
  border-radius: 8px;
  padding: 0 0 8px 0;
  margin-bottom: 24px;
}

.form-row {
  display: flex;
  align-items: center;
  padding: 0 0 0 0;
  height: 48px;
  border-bottom: 1px solid #f2f2f2;
}



.label {
  width: 80px;
  color: #222;
  font-weight: 400;
  font-size: 15px;
}

.country {
  flex: 1;
  color: #888;
  font-size: 15px;
}

.country-code {
  color: #888;
  font-size: 14px;
  margin-left: 2px;
}

.input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #222;
  padding: 0;
}

.input-placeholder {
  color: #bbb;
  font-size: 15px;
  /* margin-left: 30px; */
}

.other-login {
  text-align: left;
  margin-top: 8px;
}

.other-login-link {
  color: #4a90e2;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.content-bottom {
  margin-top: 17.25rem;
}

.phone-tip {
  color: #bbb;
  font-size: 13px;
  text-align: center;
  margin: 32px 0 16px 0;
}

.submit-btn {
  width: 80%;
  margin: 0 auto;
  display: block;
  background: #1aad19;
  color: #fff;
  font-size: 17px;
  border: none;
  border-radius: 4px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  margin-bottom: 32px;
}

.bottom-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  color: #888;
  font-size: 14px;
}

.bottom-link {
  color: #4a90e2;
  margin: 0 4px;
  cursor: pointer;
}

.divider {
  color: #bbb;
  margin: 0 2px;
}
</style>